<template>
  <div class="student-home">
    <!-- 个人信息板块 -->
    <el-card class="info-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">个人信息</span>
      </div>
      <div class="personal-info">
        <div class="avatar-section">
          <el-avatar :size="100" :src="studentInfo.avatar" />
          <div class="basic-info">
            <h3>{{ studentInfo.name }}</h3>
            <p class="student-id">学号：{{ studentInfo.studentId }}</p>
            <p class="major">专业：{{ studentInfo.major }}</p>
            <p class="grade">年级：{{ studentInfo.grade }}</p>
          </div>
        </div>
        <div class="contact-info">
          <p><i class="el-icon-phone"></i> 电话：{{ studentInfo.phone }}</p>
          <p><i class="el-icon-message"></i> 邮箱：{{ studentInfo.email }}</p>
          <p><i class="el-icon-location-information"></i> 地址：{{ studentInfo.address }}</p>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文基本信息展示区 -->
    <el-card class="thesis-basic-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">毕业论文基本信息</span>
      </div>
      <div class="thesis-basic-info">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <label>论文题目：</label>
              <span>{{ thesisInfo.title }}</span>
            </div>
            <div class="info-item">
              <label>指导教师：</label>
              <span>{{ thesisInfo.advisor }}</span>
            </div>
            <div class="info-item">
              <label>研究方向：</label>
              <span>{{ thesisInfo.researchField }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label>开题时间：</label>
              <span>{{ thesisInfo.startDate }}</span>
            </div>
            <div class="info-item">
              <label>预计完成：</label>
              <span>{{ thesisInfo.expectedDate }}</span>
            </div>
            <div class="info-item">
              <label>当前状态：</label>
              <el-tag :type="thesisInfo.statusType">{{ thesisInfo.status }}</el-tag>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 毕业论文成果详细介绍模块 -->
    <el-card class="thesis-detail-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="card-title">毕业论文成果详细介绍</span>
      </div>
      <div class="thesis-detail-info">
        <el-tabs v-model="activeDetailTab">
          <el-tab-pane label="研究背景" name="background">
            <div class="tab-content">
              <h4>研究背景与意义</h4>
              <p>{{ thesisDetail.background }}</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="研究内容" name="content">
            <div class="tab-content">
              <h4>主要研究内容</h4>
              <ul>
                <li v-for="(item, index) in thesisDetail.researchContent" :key="index">{{ item }}</li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="创新点" name="innovation">
            <div class="tab-content">
              <h4>主要创新点</h4>
              <ul>
                <li v-for="(item, index) in thesisDetail.innovations" :key="index">{{ item }}</li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="成果展示" name="achievements">
            <div class="tab-content">
              <h4>研究成果</h4>
              <div class="achievements-grid">
                <div v-for="(achievement, index) in thesisDetail.achievements" :key="index" class="achievement-item">
                  <h5>{{ achievement.title }}</h5>
                  <p>{{ achievement.description }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'HongyanshengHome',
  data() {
    return {
      activeDetailTab: 'background',
      studentInfo: {
        name: '洪炎生',
        studentId: '202301002',
        major: '软件工程',
        grade: '2023级',
        avatar: '',
        phone: '13800138002',
        email: 'hongyansheng@example.com',
        address: '上海市浦东新区'
      },
      thesisInfo: {
        title: '微服务架构在企业级应用中的设计与实现',
        advisor: '李教授',
        researchField: '分布式系统与微服务',
        startDate: '2024-09-15',
        expectedDate: '2025-07-15',
        status: '进行中',
        statusType: 'warning'
      },
      thesisDetail: {
        background: '随着企业信息化程度的不断提高，微服务架构因其灵活性、可扩展性和维护性优势，逐渐成为企业级应用开发的主流选择。本研究旨在探索微服务架构的最佳实践。',
        researchContent: [
          '微服务架构设计模式研究',
          '服务发现与注册机制实现',
          '分布式事务处理方案',
          '微服务监控与运维体系'
        ],
        innovations: [
          '设计了基于Spring Cloud的微服务架构方案',
          '实现了服务熔断与降级机制',
          '开发了统一配置管理中心',
          '构建了完整的微服务监控平台'
        ],
        achievements: [
          {
            title: '架构设计',
            description: '完成企业级微服务架构设计方案'
          },
          {
            title: '原型系统',
            description: '开发微服务原型系统并测试'
          },
          {
            title: '性能测试',
            description: '完成系统性能与稳定性测试'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.student-home {
  padding: 20px;
}

.info-card, .thesis-basic-card, .thesis-detail-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.personal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.basic-info h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
}

.basic-info p {
  margin: 5px 0;
  color: #606266;
}

.contact-info p {
  margin: 10px 0;
  color: #606266;
}

.contact-info i {
  margin-right: 8px;
  color: #409EFF;
}

.thesis-basic-info {
  padding: 10px 0;
}

.info-item {
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: bold;
  color: #303133;
  min-width: 100px;
  margin-right: 10px;
}

.info-item span {
  color: #606266;
}

.tab-content {
  padding: 20px;
}

.tab-content h4 {
  color: #303133;
  margin-bottom: 15px;
}

.tab-content p {
  line-height: 1.6;
  color: #606266;
}

.tab-content ul {
  padding-left: 20px;
}

.tab-content li {
  margin: 8px 0;
  color: #606266;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.achievement-item {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.achievement-item h5 {
  margin: 0 0 10px 0;
  color: #303133;
}

.achievement-item p {
  margin: 0;
  color: #606266;
  line-height: 1.5;
}
</style>